<template>
	<view class="classroomInfoContainer">
		<image v-if="classroomDetail.laboratoryPic" :src="classroomDetail.laboratoryPic" class="classroomImg" mode="aspectFit"></image>
		<image v-else src="../../static/images/classroom.png" class="classroomImg"></image>
		<view class="classRoomInfoBox">
			<view class="classRoomItem flex">
				<view class="classroomLabel">教室编号</view>
				<view class="classroomTxt">{{classroomDetail.laboratoryNum}}</view>
			</view>
			<view class="classRoomItem flex">
				<view class="classroomLabel">教室名称</view>
				<view class="classroomTxt">{{classroomDetail.laboratoryName}}</view>
			</view>
			<view class="classRoomItem flex">
				<view class="classroomLabel">位置描述</view>
				<view class="classroomTxt">{{classroomDetail.roomLocation}}</view>
			</view>
			<view class="classRoomItem flex">
				<view class="classroomLabel">设施说明</view>
				<view class="classroomTxt" v-if="classroomDetail.laboratoryExplain">{{classroomDetail.laboratoryExplain}}</view>
				<view class="classroomTxt" v-else>无</view>
			</view>
		</view>
		<view class="facilityDescBox">
			<view class="descHeadBox flex">
				<image src="../../static/images/tipsImg.png" class="tipsImg tipsImgLeft"></image>
				<view>教室简介</view>
				<image src="../../static/images/tipsImg.png" class="tipsImg"></image>
			</view>
			<view class="facilityDescInfo">
				
				<rich-text v-if="classroomDetail.equipmentDes" :nodes="classroomDetail.equipmentDes"></rich-text>
				<view v-else class="noDataTxt">暂无数据</view>
				<!-- <p>证书编号：2021010903380281</p>
				<p>证书状态：有效</p>
				<p>产品名称：多媒体液晶投影机</p>
				<p>3C规格型号：见附件（不带电线组件销售）</p>
				<p>品牌: SAST/先科</p>
				<p>型号: LCD1000E</p>
				<p>机体尺寸（cm）: 20.5*15.5*8.1</p>
				<p>屏幕比例: 4:3 16:9</p>
				<p>分辨率(dpi): 1920x1080dpi</p> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				laboratoryId: '',
				date: '',
				classroomDetail: {}
			}
		},
		onLoad(options) {
			this.laboratoryId = options.laboratoryId;
			this.date = options.date;
			this.searchClassroomInfo();
		},
		methods: {
			searchClassroomInfo() {
				let _this = this;
				this.$utils.requestFun('/stadium/stadium/api/findLaboratoryByIdApi?routh=curriculum',{
					laboratoryId: _this.laboratoryId,
					date: _this.date,
					token: getApp().globalData.token
				},'GET').then(res=> {
					_this.classroomDetail = res.data.data;
				})
			},
		}
	}
</script>

<style>
	.classroomInfoContainer {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.noDataTxt {
		color: #999999;
		text-align: center;
		margin: 30rpx 0;
	}
	.classroomImg {
		width: 100%;
		height: 560rpx;
	}
	.classRoomInfoBox {
		height: 450rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		width: 86.5%;
		padding: 0px 57rpx 34rpx 44rpx;
		display: inline-block;
		border-bottom: 20rpx solid #F6F6F6;
	}
	.classRoomItem {
		padding-top: 50rpx;
	}
	.classroomLabel {
		font-size: 32rpx;
		color: #999999;
		width: 30%;
	}
	.classroomTxt {
		width: 80%;
		font-size: 32rpx;
		color: #242424;
		text-align: left;
	}
	.facilityDescBox {
		width: 90%;
		padding: 40rpx;
		background: #FFFFFF;
	}
	.descHeadBox {
		display: inline-flex;
		width: 100%;
		margin: 0 auto;
		line-height: 38rpx;
	}
	.tipsBox {
		display: inline-flex;
		width: 100%;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #242424;
	}
	.tipsImg {
		width: 148rpx;
		height: 32rpx;
		margin-left: 14rpx;
		margin-top: 6rpx;
	}
	.tipsImgLeft {
		margin-right: 14rpx;
		margin-left: 16%;
		transform: rotate(180deg);
	}
	.facilityDescInfo {
		font-size: 32rpx;
		color: #242424;
		line-height: 80rpx;
	}
</style>
